<template>
  <div class="h100">
    <!-- nav -->
    <div>
      <h3>今日数据</h3>
      <div class="box">
        <Card :count="20" type="pink" title="今日已售" num="300" />
        <Card :count="15" type="orange" title="今日订票" num="100" />
        <Card :count="-18" type="skyblue" title="今日支付订单数" num="50" />
        <Card :count="20" type="green" title="今日退票" num="50" />
      </div>
    </div>
    <div class="context">
      <div class="left_box" ref="box"></div>
      <div class="right_box">
        <div class="top">
          <h4>热门粗发城市/到达城市排名</h4>
          <el-tabs
            v-model="activeName"
            type="card"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="出发城市" name="to"></el-tab-pane>
            <el-tab-pane label="到达城市" name="from"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="right_box_bottom" ref="boxRight"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Card from "@/components/Card.vue";
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { resizeFn } from '@/utils/resize'
import { leftChart, rightChart } from '@/chart/welcomeChart'
const box = ref(null);
const boxRight = ref(null);
// 切换城市

const data = ref([])
const fromCityData = [18203, 23489, 29034, 104970, 131744, 630230]
const toCityData = [29043, 13489, 49034, 304970, 131744, 230230]
const activeName = ref('to')
data.value = fromCityData
const handleClick = (tab, event) => {
  if (tab.props.name === 'from') {
    data.value = toCityData
  } else {
    data.value = fromCityData
  }
  initRight()
}
// 初始化柱状图
const init = (initDom, chartOption) => {
  const chartDom = initDom.value;
  let myChart = echarts.init(chartDom);
  myChart.setOption(chartOption);
  return myChart
}

onMounted(() => {
  resizeFn([init(box, leftChart), init(boxRight, rightChart)])
});
</script>
<style scoped>
.box {
  display: flex;
}

.context {
  display: flex;
  margin-top: 20px;
}

.left_box {
  height: 450px;
  flex: 1.5;
}

.right_box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top {
  height: 30px;
}

.right_box_bottom {
  flex: 1;
}
</style>
